/** @jsxImportSource @emotion/react */
import * as React from "react";
import {
    Text, LineColumn, InputLine, TextArea, Input, SuffixInput, BlobInputList,
} from "customize-easy-ui-component";
import {
    InspectRecordLayout, InternalItemProps,  useItemInputControl,
} from "../common/base";
import {useMeasureInpFilter} from "../common/hooks";

interface Props  extends InternalItemProps{
    label?: string;
    titles?: any[];
}

export const itemA安全附件: string[]=['安型号','安数量','安验日','安校报','安整压','安安位',
    '爆型号','爆数量','爆规格','爆周期','爆换日','爆安位',
    '力数量','力检日','力检报','力安位',
    '切规格','切数量','切耐压','切密压','切断时','切检记','切安位','切外观' ];
/**安全附件与仪表检验 (上)
 * */
export const AccessoriesValve=
React.forwardRef((
    { children, show ,alone=true,redId,nestMd,label,titles}:Props,  ref
) => {
    const [getInpFilter]=useMeasureInpFilter(null,itemA安全附件,);
    const {inp, setInp} = useItemInputControl({ ref });
    return <InspectRecordLayout inp={inp} setInp={setInp} getInpFilter={getInpFilter} show={show} redId={redId}
                                nestMd={nestMd} alone={alone} label={label!}>
        <Text variant="h5">{label}：</Text>
        安 全 阀{'>>'}
        <LineColumn >
            <InputLine  label='型号'>
                <Input value={inp?.安型号 ||''} onChange={e => setInp({...inp, 安型号: e.currentTarget.value || undefined}) } />
            </InputLine>
            <InputLine  label='数量'>
                <Input value={inp?.安数量 ||''} onChange={e => setInp({...inp, 安数量: e.currentTarget.value || undefined}) } />
            </InputLine>
            <InputLine  label='校验日期' >
                <Input  value={inp?.安验日 ||''}  type='date'
                        onChange={e => setInp({ ...inp, 安验日: e.currentTarget.value || undefined}) } />
            </InputLine>
            <InputLine  label='校验报告编号'>
                <Input value={inp?.安校报 ||''} onChange={e => setInp({...inp, 安校报: e.currentTarget.value || undefined}) } />
            </InputLine>
            <InputLine  label='整定压力' >
                <SuffixInput  value={inp?.安整压 ||''}
                              onChange={e => setInp({...inp, 安整压: e.currentTarget.value || undefined}) }>MPa</SuffixInput>
            </InputLine>
            <InputLine  label='安装位置'>
                <BlobInputList value={inp?.安安位 ||''} rows={1}  datalist={['罐上部' ]}
                               onListChange={v => setInp({ ...inp, 安安位: v || undefined}) } />
            </InputLine>
        </LineColumn>
        爆破片装置{'>>'}
        <LineColumn >
            <InputLine  label='型号'>
                <Input value={inp?.爆型号 ||''} onChange={e => setInp({...inp, 爆型号: e.currentTarget.value || undefined}) } />
            </InputLine>
            <InputLine  label='数量'>
                <Input value={inp?.爆数量 ||''} onChange={e => setInp({...inp, 爆数量: e.currentTarget.value || undefined}) } />
            </InputLine>
            <InputLine  label='规格'>
                <Input value={inp?.爆规格 ||''} onChange={e => setInp({...inp, 爆规格: e.currentTarget.value || undefined}) } />
            </InputLine>
            <InputLine  label='更换周期要求'>
                <Input value={inp?.爆周期 ||''} onChange={e => setInp({...inp, 爆周期: e.currentTarget.value || undefined}) } />
            </InputLine>
            <InputLine  label='更换日期' >
                <Input  value={inp?.爆换日 ||''}  type='date'
                        onChange={e => setInp({ ...inp, 爆换日: e.currentTarget.value || undefined}) } />
            </InputLine>
            <InputLine  label='安装位置'>
                <BlobInputList value={inp?.爆安位 ||''} rows={1}  datalist={['罐上部' ]}
                               onListChange={v => setInp({ ...inp, 爆安位: v || undefined}) } />
            </InputLine>
        </LineColumn>
        压 力 表{'>>'}
        <LineColumn >
            <InputLine  label='数量'>
                <Input value={inp?.力数量 ||''} onChange={e => setInp({...inp, 力数量: e.currentTarget.value || undefined}) } />
            </InputLine>
            <InputLine  label='检定日期' >
                <Input  value={inp?.力检日 ||''}  type='date'
                        onChange={e => setInp({ ...inp, 力检日: e.currentTarget.value || undefined}) } />
            </InputLine>
            <InputLine  label='检定报告编号'>
                <Input value={inp?.力检报 ||''} onChange={e => setInp({...inp, 力检报: e.currentTarget.value || undefined}) } />
            </InputLine>
            <InputLine  label='安装位置'>
                <BlobInputList value={inp?.力安位 ||''} rows={1}  datalist={['罐上部' ]}
                               onListChange={v => setInp({ ...inp, 力安位: v || undefined}) } />
            </InputLine>
        </LineColumn>
        紧急切断阀{'>>'}
        <LineColumn >
            <InputLine  label='型式及规格'>
                <Input value={inp?.切规格 ||''} onChange={e => setInp({...inp, 切规格: e.currentTarget.value || undefined}) } />
            </InputLine>
            <InputLine  label='数量'>
                <Input value={inp?.切数量 ||''} onChange={e => setInp({...inp, 切数量: e.currentTarget.value || undefined}) } />
            </InputLine>
            <InputLine  label='耐压试验压力'>
                <SuffixInput  value={inp?.切耐压 ||''}
                              onChange={e => setInp({...inp, 切耐压: e.currentTarget.value || undefined}) }>MPa</SuffixInput>
            </InputLine>
            <InputLine  label='密闭试验压力'>
                <SuffixInput  value={inp?.切密压 ||''}
                              onChange={e => setInp({...inp, 切密压: e.currentTarget.value || undefined}) }>MPa</SuffixInput>
            </InputLine>
            <InputLine  label='切断时间'>
                <SuffixInput  value={inp?.切断时 ||''}
                              onChange={e => setInp({...inp, 切断时: e.currentTarget.value || undefined}) }>S</SuffixInput>
            </InputLine>
            <InputLine  label='检修记录'>
                <Input value={inp?.切检记 ||''} onChange={e => setInp({...inp, 切检记: e.currentTarget.value || undefined}) } />
            </InputLine>
            <InputLine  label='安装位置'>
                <BlobInputList value={inp?.切安位 ||''} rows={1}  datalist={['罐上部' ]}
                               onListChange={v => setInp({ ...inp, 切安位: v || undefined}) } />
            </InputLine>
            <InputLine  label='外观'>
                <Input value={inp?.切外观 ||''} onChange={e => setInp({...inp, 切外观: e.currentTarget.value || undefined}) } />
            </InputLine>
        </LineColumn>
    </InspectRecordLayout>;
});


export const itemA液面计: string[]=['液型式','液数量','液充装','液安位','液外观','液误差',
    '测温型','测温期','测温观',
    '气相压','气相质','气相时',
    '液相压','液相质','液相时',  '其他阀检','检查结果' ];
/**安全附件与仪表检验 (后部) 液面计
 * */
export const LiquidLevelGauge=
    React.forwardRef((
        { children, show ,alone=true,redId,nestMd,label,titles}:Props,  ref
    ) => {
        const [getInpFilter]=useMeasureInpFilter(null,itemA液面计,);
        const {inp, setInp} = useItemInputControl({ ref });
        return <InspectRecordLayout inp={inp} setInp={setInp} getInpFilter={getInpFilter} show={show} redId={redId}
                                    nestMd={nestMd} alone={alone} label={label!}>
            <Text variant="h5">{label}：</Text>
            液 面 计{'>>'}
            <LineColumn >
                <InputLine  label='型式'>
                    <Input value={inp?.液型式 ||''} onChange={e => setInp({...inp, 液型式: e.currentTarget.value || undefined}) } />
                </InputLine>
                <InputLine  label='数量'>
                    <Input value={inp?.液数量 ||''} onChange={e => setInp({...inp, 液数量: e.currentTarget.value || undefined}) } />
                </InputLine>
                <InputLine  label='容器充装量' >
                    <SuffixInput  value={inp?.液充装 ||''}
                                  onChange={e => setInp({...inp, 液充装: e.currentTarget.value || undefined}) }>m³</SuffixInput>
                </InputLine>
                <InputLine  label='安装位置'>
                    <BlobInputList value={inp?.液安位 ||''} rows={1}  datalist={['罐上部' ]}
                                   onListChange={v => setInp({ ...inp, 液安位: v || undefined}) } />
                </InputLine>
                <InputLine  label='外观'>
                    <Input value={inp?.液外观 ||''} onChange={e => setInp({...inp, 液外观: e.currentTarget.value || undefined}) } />
                </InputLine>
                <InputLine  label='误差'>
                    <Input value={inp?.液误差 ||''} onChange={e => setInp({...inp, 液误差: e.currentTarget.value || undefined}) } />
                </InputLine>
            </LineColumn>
            测温仪表{'>>'}
            <LineColumn >
                <InputLine  label='型号'>
                    <Input value={inp?.测温型 ||''} onChange={e => setInp({...inp, 测温型: e.currentTarget.value || undefined}) } />
                </InputLine>
                <InputLine  label='有效期'>
                    <Input value={inp?.测温期 ||''} onChange={e => setInp({...inp, 测温期: e.currentTarget.value || undefined}) } />
                </InputLine>
                <InputLine  label='外观'>
                    <Input value={inp?.测温观 ||''} onChange={e => setInp({...inp, 测温观: e.currentTarget.value || undefined}) } />
                </InputLine>
            </LineColumn>
            气相软管{'>>'}
            <LineColumn >
                <InputLine  label='试验压力' >
                    <SuffixInput  value={inp?.气相压 ||''}
                                  onChange={e => setInp({...inp, 气相压: e.currentTarget.value || undefined}) }>MPa</SuffixInput>
                </InputLine>
                <InputLine  label='试验介质' >
                    <Input  value={inp?.气相质 ||''}
                            onChange={e => setInp({ ...inp, 气相质: e.currentTarget.value || undefined}) } />
                </InputLine>
                <InputLine  label='保压时间' >
                    <SuffixInput  value={inp?.气相时 ||''}
                                  onChange={e => setInp({...inp, 气相时: e.currentTarget.value || undefined}) }>min</SuffixInput>
                </InputLine>
            </LineColumn>
            液相软管{'>>'}
            <LineColumn >
                <InputLine  label='试验压力' >
                    <SuffixInput  value={inp?.液相压 ||''}
                                  onChange={e => setInp({...inp, 液相压: e.currentTarget.value || undefined}) }>MPa</SuffixInput>
                </InputLine>
                <InputLine  label='试验介质' >
                    <Input  value={inp?.液相质 ||''}
                            onChange={e => setInp({ ...inp, 液相质: e.currentTarget.value || undefined}) } />
                </InputLine>
                <InputLine  label='保压时间' >
                    <SuffixInput  value={inp?.液相时 ||''}
                                  onChange={e => setInp({...inp, 液相时: e.currentTarget.value || undefined}) }>min</SuffixInput>
                </InputLine>
            </LineColumn>
            其他阀门、附件检验：
            <TextArea  value={inp?.其他阀检 ||''} rows={6}
                       onChange={e => setInp({ ...inp, 其他阀检: e.currentTarget.value||undefined}) } />
            检查结果：
            <TextArea  value={inp?.检查结果 ||''} rows={8}
                       onChange={e => setInp({ ...inp, 检查结果: e.currentTarget.value||undefined}) } />
        </InspectRecordLayout>;
    });

